<template>
    <div class="body_box">
        <!-- app-container -->
        <div class="head">
            <el-form :model="queryParams" ref="queryParams" :inline="true">
                <el-form-item label="攻略名称：" prop="name">
                    <el-input placeholder="请填写" v-model="queryParams.name"> </el-input>
                </el-form-item>
                <el-form-item label="标签：" prop="label">
                    <el-select v-model="queryParams.label" placeholder="请选择" clearable style="width: 190px">
                        <el-option v-for="dict in labelList" :key="dict.id" :label="dict.value"
                            :value="dict.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="发布状态：" prop="status">
                    <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 190px">
                        <el-option v-for="dict in statusList" :key="dict.id" :label="dict.value"
                            :value="dict.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="发布时间：" prop="date">
                    <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" @change="handleTime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery('queryParams')">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="listBox">
            <div class="main_top">
                <div class="lef">
                    <el-button @click="handleAddEdit(1)" type="primary">新增</el-button>
                </div>
                <div class="listBox_head"></div>
            </div>
            <el-table ref="table" v-loading="loading" :data="tabList" stripe border>
                <el-table-column label="序号" align="center" type="index" width="64px" />
                <el-table-column label="攻略标题" align="center" prop="name" :show-overflow-tooltip="true" />
                <el-table-column label="标签" align="center" prop="lable"  >
                 <template slot-scope="scope">
                     <dict-tag :options="labelList" :value="scope.row.label" />
                  </template>
                </el-table-column>
                <el-table-column label="任务ID" align="center" prop="taskId" :show-overflow-tooltip="true" />
                <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true" />
                <el-table-column label="发布时间" align="center" prop="releaseTime" :show-overflow-tooltip="true" />
                <el-table-column label="达人广告收益" align="center" prop="income" :show-overflow-tooltip="true"/>
                <el-table-column label="发布状态" align="center" prop="status"  >
                 <template slot-scope="scope">
                     <dict-tag :options="statusList" :value="scope.row.status" />
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button @click="bindTaskID(scope.row)" type="text" size="small" v-if="scope.row.status != 3">绑定任务ID</el-button>
                        <el-button @click="handleCopy(scope.row)" type="text" size="small" v-if="scope.row.status != 3">复制推广路径</el-button>
                        <el-button @click="upAndDownHandle(scope.row)" type="text" size="small" v-if="scope.row.status != 3">{{scope.row.status==1?'上架':'下架'}}</el-button>
                        <el-button @click="delHandle(scope.row)" type="text" size="small">删除</el-button>
                        <el-button @click="handleAddEdit(2,scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="viewHandle(scope.row)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList"></pagination>
        </div>
        <Dialog :id="dialogId" :taskId="taskId" v-bind="$attrs" v-if="dialogVisible" :visible.sync="dialogVisible"
            @success="_handleSuccess">
        </Dialog>
        <LookDiglog v-if="lookStatus" :ruleForm="ruleForm" :visible.sync="lookStatus" @success="_handleSuccess"></LookDiglog>

    </div>
</template>

<script>
import {
    douyinVideoTalentWorksList,
    douyinVideoTalentWorksUpDowm,
    douyinVideoTalentWorksDelete,
    douyinVideoTalentWorksDetail
  } from "@/api/incentiveManagement/strategyManagement";
import ExportExcelButton from "@/components/ExportExcelButton/index";
import Dialog from "./components/dialog";
import LookDiglog from './components/lookDiglog'
export default {
    name: "settlementStatistics",
    components: {
        Dialog,
        LookDiglog,
        ExportExcelButton,
    },
    data() {
        return {
            loading: false,
            dialogVisible: false,
            lookStatus: false,
            total: 0,//状态字典数组
            labelList: [],//选择标签
            statusList: [],//发布状态
            dialogId:'',//绑定id
            taskId:'',//绑定任务id
            //表格数据
            tabList: [],
            ruleForm:{},//查看详情获取数据
            date: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                name: "", //攻略名称
                label: '', //标签
                status: '', //发布状态
                releaseStartTime: '', //开始时间
                releaseEndTime: '', //结束时间
            },

        }
    },
    computed: {
        ExportParams() {
            const params = {
                ...this.queryParams,
            };
            return params;
        },
    },
    created() {
        this.getDict()
    },
    methods: {
        // 新增攻略
        handleAddEdit(type,row = '') {
            var pathType = 'add'
            var id = ''
             if(type == 2){
                pathType = 'edit'
                id = row.id
             }
            this.$router.push({ path: `/incentiveManagement/strategyManagement/add?pathType=${pathType}&id=${id}`});
        },
        // 查询线路详情
        viewHandle(row){
            douyinVideoTalentWorksDetail(row.id).then(response => {
                this.ruleForm = response.result
                this.lookStatus = true
            });
        },
        // 时间切换
        handleTime(e) {
            this.queryParams.releaseStartTime = this.date[0]
            this.queryParams.releaseEndTime = this.date[1]
        },
        //成功回调
        _handleSuccess(e) {
            this.getList()
        },
        // 绑定任务ID
        bindTaskID(item) {
            this.dialogId = item.id
            this.taskId = item.taskId
            this.dialogVisible = true
        },
        // 根据字典值获取信息
        getDict() {
            var dictType = "douyin_video_talent_works_label,douyin_video_talent_works_status";
            this.$getSelectList(dictType)
                .then((res) => {
                    this.labelList = res.result[0].dictList;
                    this.statusList = res.result[1].dictList;
                    this.getList()

                })
                .finally(() => {
                    this.loading = false;
                });
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            douyinVideoTalentWorksList(this.queryParams).then((response) => {
                response.result.records.forEach(item => {
                    for (var key in item) {
                        if (item[key] === '') {
                            item[key] = "-";
                        }
                    }
                });
                this.tabList = response.result.records;
                this.total = response.result.total;
                this.loading = false;
            });
        },
        delHandle(row) {
            //删除deleteMerchant
            this.$confirm("确认删除此信息?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(() => {
                console.log('row.id',row.id)
                douyinVideoTalentWorksDelete(row.id).then((res) => {
                    this.$message({
                        message: "删除成功",
                        type: "success",
                        duration: 1500,
                    });
                    setTimeout(() => {
                        this.queryParams.pageNum = 1
                        this.getList();
                    }, 800);
                });
            })
            .catch(() => { });
        },
      //上下架
      upAndDownHandle(row) {
        var title = ''
        var status = ''
        if (row.status == 1) {
          title = '上架'
          status = 2
        } else if(row.status == 2) {
          title = '下架'
          status = 1
        }
        this.$confirm('确认' + title + '此信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: row.id,
            status:status
          }
          douyinVideoTalentWorksUpDowm(data).then(response => {
            this.$message({
              type: 'success',
              message: title + '成功!'
            });
            this.getList();
          });
        }).catch(() => {});
      },
        handleCopy(row) {
            this.copyCenter(`pages/subPackages/pagesA/footprintDetail/footprintDetail?workId=${row.id}`)
        },

        copyCenter(value) { //复制
            console.log(value)
            if (value == undefined || value == '') {
                this.$message.error('复制失败,url地址不存在')
                return
            }
            //创建input标签
            var input = document.createElement('input')
            //将input的值设置为需要复制的内容
            input.value = value;
            //添加input标签
            document.body.appendChild(input)
            //选中input标签
            input.select()
            //执行复制
            document.execCommand('copy')
            //成功提示信息
            this.$message.success('复制成功')
            //移除input标签
            document.body.removeChild(input)
        },
        /** 搜索按钮操作 */
        handleQuery(formName) {
            //创建确定
            this.queryParams.pageNum = 1;
            this.getList();

        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                query: "", //卡查询
                referrer: '', //邀请人
                settledStatus: '', //入驻状态
                settlementAccountStatus: '', //结算账户状态
                releaseStartTime: '', //开始时间
                releaseEndTime: '', //结束时间
            };
            // this.$refs["queryParams"].resetFields();
            this.date = []
            this.getList();
        },
    },
};

</script>

<style scoped scoped lang="scss">
::v-deep .el-table .DisableSelection .cell .el-checkbox__inner {
    display: none;
}

.body_box {
    padding: 20px;
}

.head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
}

.listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
}

.listBox_head {
    padding: 0 0 5px 0;
}

.el-dropdown {
    margin-left: 10px;
}

.main_top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    color: #333;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 10px;

    .lef {}
}
</style>